<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="职位名称">
              <el-input v-model="formInline.selectPositionInput" placeholder="职位名称"></el-input>
            </el-form-item>
            <el-button plain style="margin-left: 10px;" @click="select">搜索</el-button>
            <el-dialog title="搜索结果" :visible.sync="dialogTableVisible" width="1000px">
              <el-table :data="myselect">
                <el-table-column width="50" property="id" label="编号"></el-table-column>-->
                <el-table-column width="130" property="name" label="职位名称"></el-table-column>
                <el-table-column width="130" property="roleId" label="群组角色"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                      <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="grid-content bg-purple">
          <el-button plain @click="addPosition">添加</el-button>
          <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="编号" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="职位名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="群组角色" :label-width="formLabelWidth">
                <el-select v-model="form.remark" placeholder="请选择角色" value="">
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="会计" value="会计"></el-option>
                  <el-option label="服务员" value="服务员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveAddPosition">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <PositionTable></PositionTable>
    </el-row>
  </div>
</template>

<script>
  import PositionTable from './PositionTable'
  import {mapActions} from 'vuex'
    export default {
        name: "Position",
        components:{
            PositionTable
        },
        data(){
            return {
                formInline:{
                    selectPositionInput:'',
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    name: '',
                    remark: '',
                },
                formLabelWidth: '120px',
                myselect:[],
            }
        },
        methods:{
            saveAddPosition(){
                this.dialogFormVisible = false
                console.log(this.form)
                this.$axios({
                    url:'',
                    methods:'post',
                    data:this.form
                }).then(res=>{
                    console.log(res)
                })
            },
            addPosition(){
                this.dialogFormVisible = true
            },
            ...mapActions(['selectPositionData']),
            select(){
                this.dialogTableVisible = true
                //this.$store.dispatch('selectData',[this.selectValue,this.selectInput])
               console.log(this.formInline.selectPositionInput)
                this.selectPositionData(this.formInline.selectPositionInput).then(res=>{
                    console.log(res)
                    this.myselect=res.data.list
                }).catch(err=>{
                    console.log(err)
                })

            },
            handleEdit(index, row) {
                console.log(index, row);
                this.dialogFormVisible = true
                console.log(index, row);
                this.form.id=row.id
                this.form.name=row.name
                this.remark=row.remark
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deletePositionData',row)
            },
        }
    }
</script>

<style scoped>

</style>
